<template>
  <div>
    <!-- 分组管理 -->
    <div class="top" v-show="fall" > <p><span>标签名称:</span>    <el-input v-model="input" class="inp" placeholder="请输入标签名称" /> 
      <span>状态:</span>  <el-select v-model="form.state" placeholder="请选择状态" class="selec">
          <el-option label="禁用" value="禁用" />
          <el-option label="正常" value="正常" />
        </el-select>
    <el-button type="primary" :icon="Refresh">搜索</el-button> <el-button type="info" :icon="Delete">清空</el-button></p>
</div>
 <div class="searbox">
  <el-button :icon="Refresh"></el-button>
  <el-button  @click="show(fall)" :icon="Search"></el-button> </div> 
  <p class="ps">    <el-button type="primary" @click="dialogFormVisible = true" :icon="Plus">新增</el-button></p>
   <el-dialog v-model="dialogTableVisible" title="Shipping address">
</el-dialog>


<!-- 表格 -->
<el-table border  ref="multipleTableRef"
  :data="list"

  style="width: 100%;">

  <el-table-column fixed="left" align="center" width="80"  label="序号" type="index"/>
  <el-table-column prop="title" label="标签名称" align="center"  width="180" />
  <el-table-column prop="province" align="center" label="状态" width="180" >
    <template #default="scope">
      <span>{{ scope.row.status ==1?'正常':"禁用"}}</span>
    </template>
  </el-table-column>
  <el-table-column prop="city" align="center" label="默认类型" width="200" >
  <template #default="scope">
      <span>{{ scope.row.style ==0?'自定义类型':"默认类型"}}</span>
    </template>
    </el-table-column>
    <el-table-column prop="id" align="center" label="排序" width="200" />
  <el-table-column  label="操作" align="center"  width="250">
    <template #default="scope">
      <el-button type="primary" :icon="EditPen">修改</el-button>
      <el-button type="danger" :icon="DeleteFilled" @click="del(scope.$index)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
<!-- 新增弹框 -->
<el-dialog v-model="dialogFormVisible" title="新增">
    <el-form :model="form">
      <el-form-item label="标题名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <div class="mb-2 flex items-center text-sm">
    <el-radio-group v-model="radio1" class="ml-4">
      <el-radio label="1" size="large">正常</el-radio>
      <el-radio label="2" size="large">禁用</el-radio>
    </el-radio-group>
  </div>
      </el-form-item>
      <el-form-item label="列表样式" :label-width="formLabelWidth">
        <div class="mb-2 flex items-center text-sm">
    <el-radio-group v-model="radio2" class="ml-4">
      <el-radio label="3" size="large">一列一个</el-radio>
      <el-radio label="4" size="large">一列两个</el-radio>
      <el-radio label="5" size="large">一列三个</el-radio>
    </el-radio-group>
  </div>
      </el-form-item>
      <el-form-item label="排序" :label-width="formLabelWidth">
        <el-input-number
    v-model="num"
    :min="1"
    :max="10"
    controls-position="right"
    size="large"
    @change="handleChange"
  />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import {
Check,
Delete,
Edit,
Message,
EditPen,
Plus,
Refresh,
Search,
Star,
DeleteFilled
} from '@element-plus/icons-vue'
import { ref,reactive, onMounted } from 'vue'
import {fenzu} from '@/api/index'
import {useClass} from '@/store/index'
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const input = ref('')
const radio1 = ref('1')
const radio2 = ref('1')
const num = ref(1)
const t=ref(new Date().getTime()*1)
const size=ref(10)
const current=ref(1)
const store=useClass()
const list=ref([])
onMounted(async ()=>{
const res=await fenzu()
list.value=res.data.records
console.log(list,'分组管理');

store.getlist(t.value,size.value,current.value)

})

const fall=ref(false)
let show=(item)=>{
fall.value =! fall.value
 
}
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

const form = reactive({
name: '',
state: '',
top: '',
date2: '',
delivery: false,
type: [],
resource: '',
address:'',
desc: '',
tel:''
})

const del=(res)=>{
list.value.splice(res,1)
}






</script>

<style scoped>

.inp{
  width: 200px;
}

.selec{
  width: 150px;
}
.searbox{
  margin-left: 80%;
}

</style>